<template>
	<view>
		<view>
			<view class="imgvideo">
				<text :class="{video_title : isimg}" @click="totaggle(1)">领取出库</text>
				<text :class="{video_title : !isimg}" @click="totaggle(2)">借用出库</text>
			</view>
			<view class="list_content">
				<view class="con_list u-border-bottom" v-for="(item,index) in list" :key="index">
					
						<view class="u-flex u-row-between u-border-bottom" style="padding-bottom:20rpx;margin-bottom:20rpx;">
							<view>订单号：2959559599</view>
							<view style="color:#00aa00;font-size: 26rpx;" >审核通过</view>
							<!-- <view v-else style="color:#ff5500;font-size: 26rpx;">调拨</view> -->
						</view>
						<image :src="item.image" mode="aspectFill"></image>
						<view class="dis_inl_blo con_intro">
							<view class="title_name">{{item.name}}</view>
							<view class="person_con">
								<text>数量：{{item.num}}</text>
								<text class="u-margin-left-20">总价：<text style="color:red;font-size:32rpx;">￥{{item.price}}</text></text>
								<!-- <text class="dis_blo"></text> -->
							</view>
							<view class="person_con">
								<text>借领人：{{item.username}}</text>
							</view>
							<view class="price" style="width:100%;margin-top:10rpx;">
								<text class="time">使用时间：{{item.time}}</text>
								<!-- <text class="rubtn u-abso ">入库</text> -->
							</view>
						</view>
						<view class="u-padding-top-20 u-border-top u-text-right" style="margin-top:20rpx;">
							<view class="btn_con btn_con1" @click="tooutDetail(item)">查看详情</view>
						</view>
					
				</view>
				
			</view>
		</view>
		<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
	</view>
</template>

<script>
	import {
		getAssetsInOutLog
	} from "@/service/assetService.js";
	export default {
		data () {
			return {
				customStyle:{
					borderColor:'#008987',
					color:'#008987'
				},
				
				current: 0,
				type:0,
				tabs: [
					{
						name: '全部'
					},
					{
						name: '领用'
					},
					{
						name: '借用'
					}
				],
				showEmpty:false,
				list:[],
				isimg:true
			}
		},
		onLoad() {
			getAssetsInOutLog({type:1}).then(this.getAssetsInOutLog)
		},
		methods:{
			getAssetsInOutLog(e){
				if(e.code==200){
					this.list=e.result;
					this.showEmpty=false
				}else{
					this.list=[];
					this.showEmpty=true
				}
			},
			
			tooutDetail(item){
				uni.navigateTo({
					url:'./outDetail?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			totaggle:function(num){
				if(num==1){
					this.isimg=true
				}else{
					this.isimg=false
				}
				getAssetsInOutLog({type:num}).then(this.getAssetsInOutLog)
			},
			changeTabs(e) {
				let par;
				this.current = e;
				switch (this.current) {
					case 0:
						par = {
							type:99
						};
						break;
					case 1:
						par = {
							type:1
						};
						break;
					case 2:
						par = {
							type:2
						};
						break;
					default:
						par = {
							type:99
						};
				}
				getAssetsLogList(par).then(this.getAssetsLogList);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.imgvideo{
		display: block;
		width:95%;
		margin:30rpx auto;
		border:1rpx solid #008987;
		border-radius: 10rpx;
		overflow: hidden;
		text{
			display: inline-block;
			height:60rpx;
			width:50%;
			color:#008987;
			text-align: center;
			line-height: 60rpx;
		}
		.video_title{
			color:#fff;
			background-color: #008987;
		}
	}
	.list_content{
		width:95%;
		margin:20rpx auto;
	}
	.con_list{
		padding:20rpx;
		background-color: #fff;
		margin-bottom:20rpx;
		border-radius: 20rpx;
	}
	.con_list image{
		width:25%;
		height:180rpx;
		border-radius: 10rpx;
		vertical-align: top;
	}
	.con_intro{
		width:70%;
		margin-left:15rpx;
		vertical-align: top;
	}
	.person_con{
		margin-top:10rpx;
		font-size: 26rpx;
		color:#666;
	}
	.title_name{
		width:80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.price{
		width:70%;
		bottom:50rpx;
		font-size: 28rpx;
	}
	.detail{
		font-size: 26rpx;
		color:#0f848c;
		padding:3rpx 25rpx;
		border:1rpx solid #0f848c;
		border-radius: 18rpx;
	}
	.time{
		font-size: 24rpx;
		color:#666;
	}
	.btn_con{
		display: inline-block;
		width:150rpx;
		height:50rpx;
		color:#fff;
		font-size: 28rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		margin-left:15rpx;
		text-align: center;
	}
	.btn_con1{
		border:1rpx solid #008987;
		color:#008987;
	}
	.btn_con2{
		background-color: #008987;
	}
	.btn_con4{
		background-color: #ffaa00;
	}
</style>